<template>
	<view class="tbody">
		<text class="name">学习标题</text>
		<input  class="headline" v-model="formData.title"/>
		<text class="name">封面图片</text>
		<view class="cover">
			<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple
				:maxCount="1"></u-upload>
		</view>

		<text class="name">学习内容</text>
		<!-- 编辑内容 -->
		<view class="editor">
			<cu-editor showImgSize="true" class="editor-one" ref="editor" :url="uploadUrl" :header="header" :formData="formData"
				@before="onUploadBefore" :value="content" @save="save"></cu-editor>
			
		</view>

		<!-- 确认发布 -->
		<view class="issue" @click="issue">
			确认发布
		</view>
	</view>
</template>

<script>
	import cuEditor from '@/components/cu-editor/cu-editor'
	export default {
		components: {
			cuEditor
		},
		data() {
			return {
				ip: this.$store.state.user.URL,
				content: 'fkjakd',
				fileList4: [], //封面图片回显
				formData : {
				  title: "", //上传的标题
				  content: "",
				  coverImage : '',//上传封面图片

				},
				
				
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(pathurl) {
				// 上传封面图片的路径
				return new Promise((resolve, reject) => {
					const  URL = this.$store.state.user.URL
					let a = uni.uploadFile({
						url: `${URL}/appCommon/upload`, // 仅为示例，非真实的接口地址
						filePath: pathurl,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
								this.formData.coverImage = res.data
							}, 1000)
						}
					});
				})
			},
			// 组件通讯，子传父，拿到文本框里面的内容，然后赋值给定义好的变量
			save(res){
				this.formData.content = res.html
			},
			// 点击上传按钮
			 issue() {
				// 调用组件editor上面方法save获取编辑器内容，然后save会通过子传父的方法把文本框内容传过来
				this.$refs.editor.save()
				// 用定时器调用接口
				setTimeout(this.fs,1000)
				console.log(res);
			},
			async fs(){
				// this.formData.content = this.formData.content.replace(/src="https:\/\/www\.milefuwu\.xyz:441\//g, 'src="/');
				this.formData.content = this.formData.content.replace(`/src="${this.ip}\//g`, 'src="/');
				await uni.$http.post('/business/learningcontent',this.formData)
			}
			
	
		}
	}
</script>

<style lang="scss">
	.name {
		opacity: 0.5;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 0px;
		color: rgba(20, 58, 64, 1);
	}

	.headline {
		margin-top: 24rpx;
		margin-bottom: 64rpx;
		padding-left: 24rpx;
		box-sizing: border-box;
		height: 78rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: #F5FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 0px;
		color: rgba(20, 58, 64, 1);
		line-height: 74rpx;
	}

	.cover {
		border-radius: 20rpx;
		background: #F5FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		padding: 32rpx 0 32rpx 32rpx;
		margin-top: 24rpx;
		margin-bottom: 64rpx;
	}

	.editor {
		margin-top: 24rpx;
		min-height: 325rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: #F5FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		margin-bottom: 88rpx;
	}

	::v-deep .fixed-top {
		display: none;
	}

	::v-deep .fixed-top__place {
		display: none;
	}

	.issue {
		height: 88rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: rgba(22, 193, 219, 1);


		font-size: 32rpx;
		font-weight: 400;
		color: rgba(235, 252, 255, 1);
		text-align: center;
		line-height: 88rpx;
	}

	::v-deep .cu-editor {
		color: #143A40;
		font-style: normal;
	}

	.editor-one {
		height: 300rpx !important;
	}
</style>